import React from 'react'
import injectSheet from 'react-jss'
import styles from './styles'
import https from '@/assets/https'
import { Layout, } from 'antd'
import { Link } from 'react-router-dom'
import moment from 'moment'
const { Content, } = Layout

function parseTime(time) {
  let date = moment(time).format('YYYY-MM-DD')
  return date
}

class TopicList extends React.Component {
  state = {
    list: [],
  }

  componentWillMount() {
    https('/topic', {})
      .then(result => {
        const list = result.data
        this.setState({
          list,
        })
      })
  }

  render() {
    const { classes } = this.props
    return (
      <Layout>
        <Content className={classes.Content}>
          <ul className={classes.TopicList}>
            {
              this.state.list.map((item, index) => (
                <Link to={`/topic/${item.topicId}`} key={index}>
                  <li className={classes.TopicItem}>
                    <h3 className={classes.TopicTitle}>{item.title}</h3>
                    <ul className={classes.TopicInfo}>
                      <li><span className={`${classes.Label} Label-${item.type.typeId}`}>{item.type.value}</span></li>
                      <li>{parseTime(item.createTime)}</li>
                    </ul>
                  </li>
                </Link>
              ))
            }
          </ul>
        </Content>
      </Layout>
    )
  }
}

export default injectSheet(styles)(TopicList)
